ಸಿಎಸ್ಎಸ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: @property ಜೊತೆಗೆ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ನೋಂದಣಿ

ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು (ಸಿಎಸ್ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳು ಎಂದೂ ಕರೆಯಲ್ಪಡುತ್ತವೆ) ನಾವು ಸಿಎಸ್ಎಸ್ ಬರೆಯುವ ಮತ್ತು ನಿರ್ವಹಿಸುವ ವಿಧಾನವನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸಿವೆ. ಅವು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ, ನಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲವನ್ನಾಗಿ ಮಾಡುತ್ತವೆ. ಆದರೆ ನೀವು ಕೇವಲ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದನ್ನು ಮೀರಿ ಹೋಗಲು ಸಾಧ್ಯವಾದರೆ ಏನು? ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯು ಹೊಂದಿರುವ ಪ್ರಕಾರವನ್ನು ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯ ಮತ್ತು ಇನ್ಹೆರಿಟೆನ್ಸ್ ವರ್ತನೆಯೊಂದಿಗೆ ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದಾದರೆ ಏನು? ಅಲ್ಲಿಯೇ @property ಬರುತ್ತದೆ.

@property ಎಂದರೇನು?

@property ಎಂಬುದು ಸಿಎಸ್ಎಸ್‌ನ ಒಂದು ಅಟ್-ರೂಲ್ ಆಗಿದ್ದು, ಇದು ಬ್ರೌಸರ್‌ಗೆ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನೋಂದಾಯಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ನೋಂದಣಿ ಪ್ರಕ್ರಿಯೆಯು ಬ್ರೌಸರ್‌ಗೆ ಪ್ರಾಪರ್ಟಿಯ ನಿರೀಕ್ಷಿತ ಪ್ರಕಾರ, ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯ, ಮತ್ತು ಅದು ಅದರ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್ಹೆರಿಟ್ ಆಗಬೇಕೇ ಎಂಬುದರ ಕುರಿತು ಮಾಹಿತಿ ನೀಡುತ್ತದೆ. ಇದು ಹಲವಾರು ಸುಧಾರಿತ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ, ಅವುಗಳೆಂದರೆ:

• ಪ್ರಕಾರ ಪರಿಶೀಲನೆ (Type checking): ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗೆ ಸರಿಯಾದ ಪ್ರಕಾರದ ಮೌಲ್ಯವನ್ನು ನಿಗದಿಪಡಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ಅನಿಮೇಷನ್: ಸಂಖ್ಯೆಗಳು ಅಥವಾ ಬಣ್ಣಗಳಂತಹ ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರಗಳ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಸುಗಮ ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
• ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳು: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದರೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ಇನ್ಹೆರಿಟೆನ್ಸ್ ನಿಯಂತ್ರಣ (Inheritance control): ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯು ಅದರ ಮೌಲ್ಯವನ್ನು ಅದರ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್ಹೆರಿಟ್ ಮಾಡುತ್ತದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ.

ಇದನ್ನು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳಿಗೆ ಪ್ರಕಾರದ ಸುರಕ್ಷತೆಯನ್ನು (type safety) ಸೇರಿಸಿದಂತೆ ಯೋಚಿಸಿ. ಇದು ನಿಮಗೆ ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

@property ಸಿಂಟ್ಯಾಕ್ಸ್

The @property ನಿಯಮವು ಈ ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಅನುಸರಿಸುತ್ತದೆ:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

ಪ್ರತಿ ಭಾಗವನ್ನು ವಿವರಿಸೋಣ:

• --property-name: ನೀವು ನೋಂದಾಯಿಸಲು ಬಯಸುವ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಹೆಸರು. ಇದು ಎರಡು ಹೈಫನ್‌ಗಳಿಂದ (--) ಪ್ರಾರಂಭವಾಗಬೇಕು.
• syntax: ಪ್ರಾಪರ್ಟಿಗಾಗಿ ನಿರೀಕ್ಷಿತ ಮೌಲ್ಯದ ಪ್ರಕಾರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಪ್ರಕಾರದ ಪರಿಶೀಲನೆ ಮತ್ತು ಅನಿಮೇಷನ್‌ಗೆ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಲಭ್ಯವಿರುವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೌಲ್ಯಗಳನ್ನು ನಾವು ಕೆಳಗೆ ವಿವರವಾಗಿ ಅನ್ವೇಷಿಸುತ್ತೇವೆ.
• inherits: ಪ್ರಾಪರ್ಟಿಯು ಅದರ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಇನ್ಹೆರಿಟ್ ಆಗಬೇಕೇ ಎಂದು ಸೂಚಿಸುವ ಬೂಲಿಯನ್ ಮೌಲ್ಯ. ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ false ಗೆ ಡೀಫಾಲ್ಟ್ ಆಗುತ್ತದೆ.
• initial-value: ಪ್ರಾಪರ್ಟಿಗೆ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಸ್ಪಷ್ಟವಾಗಿ ಸೆಟ್ ಮಾಡದಿದ್ದರೆ ಅದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ. ಇದು ಯಾವಾಗಲೂ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೌಲ್ಯ ಲಭ್ಯವಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

syntax ಡಿಸ್ಕ್ರಿಪ್ಟರ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

syntax ಡಿಸ್ಕ್ರಿಪ್ಟರ್ @property ನಿಯಮದ ಅತ್ಯಂತ ಪ್ರಮುಖ ಭಾಗವಾಗಿದೆ. ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಾಗಿ ಯಾವ ರೀತಿಯ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸಬೇಕು ಎಂದು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳುತ್ತದೆ. ಕೆಲವು ಸಾಮಾನ್ಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೌಲ್ಯಗಳು ಇಲ್ಲಿವೆ:

• *: ಯಾವುದೇ ಮೌಲ್ಯಕ್ಕೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಅತ್ಯಂತ ಅನುಮತಿಸುವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿದೆ ಮತ್ತು ಮೂಲಭೂತವಾಗಿ ನೋಂದಣಿ ಇಲ್ಲದೆ ಸಾಮಾನ್ಯ ಸಿಎಸ್ಎಸ್ ವೇರಿಯಬಲ್‌ನ ವರ್ತನೆಯನ್ನು ಪುನರಾವರ್ತಿಸುತ್ತದೆ. ಇದನ್ನು ಮಿತವಾಗಿ ಬಳಸಿ.
• <length>: ಉದ್ದದ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., 10px, 2em, 50%). ಇದು ವಿಭಿನ್ನ ಉದ್ದದ ಮೌಲ್ಯಗಳ ನಡುವೆ ಸುಗಮ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
• <number>: ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., 1, 3.14, -5). ಒಪಾಸಿಟಿ ಅಥವಾ ಸ್ಕೇಲ್‌ನಂತಹ ಸಂಖ್ಯಾತ್ಮಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಉಪಯುಕ್ತವಾಗಿದೆ.
• <percentage>: ಶೇಕಡಾವಾರು ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., 25%, 100%).
• <color>: ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). ಇದು ಸುಗಮ ಬಣ್ಣ ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
• <image>: ಚಿತ್ರದ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., url(image.jpg), linear-gradient(...)).
• <integer>: ಪೂರ್ಣಾಂಕ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., 1, -10, 0).
• <angle>: ಕೋನದ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., 45deg, 0.5rad, 200grad). ತಿರುಗುವಿಕೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಉಪಯುಕ್ತವಾಗಿದೆ.
• <time>: ಸಮಯದ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., 1s, 500ms). ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಮೂಲಕ ಅನಿಮೇಷನ್ ಅವಧಿಗಳು ಅಥವಾ ವಿಳಂಬಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಉಪಯುಕ್ತವಾಗಿದೆ.
• <resolution>: ರೆಸಲ್ಯೂಶನ್ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., 300dpi, 96dpi).
• <transform-list>: ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್ ಫಂಕ್ಷನ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., translateX(10px) rotate(45deg)). ಸಂಕೀರ್ಣ ರೂಪಾಂತರಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.
• <custom-ident>: ಕಸ್ಟಮ್ ಐಡೆಂಟಿಫೈಯರ್ (ಒಂದು ಸ್ಟ್ರಿಂಗ್) ಅನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ. ಒಂದು enum ಗೆ ಹೋಲುತ್ತದೆ.
• <string>: ಸ್ಟ್ರಿಂಗ್ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ (ಉದಾ., "Hello World"). ಇದರ ಬಗ್ಗೆ ಜಾಗರೂಕರಾಗಿರಿ, ಏಕೆಂದರೆ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
• ಕಸ್ಟಮ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಳು: ಮೇಲಿನವುಗಳ ಸಂಯೋಜನೆ ಮತ್ತು | (ಅಥವಾ), `[]` (ಗುಂಪುಗಾರಿಕೆ), `+` (ಒಂದು ಅಥವಾ ಹೆಚ್ಚು), `*` (ಶೂನ್ಯ ಅಥವಾ ಹೆಚ್ಚು), ಮತ್ತು `?` (ಶೂನ್ಯ ಅಥವಾ ಒಂದು) ಆಪರೇಟರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ: <length> | <percentage> ಉದ್ದ ಅಥವಾ ಶೇಕಡಾವಾರು ಮೌಲ್ಯವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ಸರಿಯಾದ syntax ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು @property ಯ ಸಂಪೂರ್ಣ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ಅತ್ಯಗತ್ಯ.

@property ಯ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್‌ನಲ್ಲಿ @property ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಕುರಿತು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.

ಉದಾಹರಣೆ 1: ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು

ನೀವು ಒಂದು ಬಟನ್‌ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ಹಿನ್ನೆಲೆ ಬಣ್ಣಕ್ಕಾಗಿ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ನೋಂದಾಯಿಸಲು ನೀವು @property ಅನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ನಂತರ ಅದನ್ನು ಸಿಎಸ್ಎಸ್ ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸಿ ಅನಿಮೇಟ್ ಮಾಡಬಹುದು.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು --bg-color ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು <color> ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ನೋಂದಾಯಿಸುತ್ತೇವೆ, ಅಂದರೆ ಅದು ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ. initial-value ಅನ್ನು ಬಿಳಿ ಬಣ್ಣಕ್ಕೆ (#fff) ಸೆಟ್ ಮಾಡಲಾಗಿದೆ. ಬಟನ್ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, --bg-color ಕೆಂಪು ಬಣ್ಣಕ್ಕೆ (#f00) ಬದಲಾಗುತ್ತದೆ, ಮತ್ತು ಪರಿವರ್ತನೆಯು ಹಿನ್ನೆಲೆ ಬಣ್ಣದ ಬದಲಾವಣೆಯನ್ನು ಸುಗಮವಾಗಿ ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ 2: ಸಂಖ್ಯೆಯೊಂದಿಗೆ ಬಾರ್ಡರ್ ರೇಡಿಯಸ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುವುದು

ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಬಾರ್ಡರ್ ರೇಡಿಯಸ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು ಮತ್ತು ಅದನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ನೀವು @property ಅನ್ನು ಬಳಸಬಹುದು.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

ಇಲ್ಲಿ, ನಾವು --border-radius ಅನ್ನು <length> ಎಂದು ನೋಂದಾಯಿಸುತ್ತೇವೆ, ಅದು px, em, ಅಥವಾ % ನಂತಹ ಉದ್ದದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಆರಂಭಿಕ ಮೌಲ್ಯ 0px ಆಗಿದೆ. .rounded-box ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಬಾರ್ಡರ್ ರೇಡಿಯಸ್ 20px ಗೆ ಅನಿಮೇಟ್ ಆಗುತ್ತದೆ.

ಉದಾಹರಣೆ 3: ನೆರಳಿನ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು

ನೀವು ಬಾಕ್ಸ್ ಶಾಡೋದ ಸಮತಲ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಬಯಸುತ್ತೀರಿ ಎಂದುಕೊಳ್ಳೋಣ.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

ಈ ಸಂದರ್ಭದಲ್ಲಿ, --shadow-offset-x ಅನ್ನು <length> ಎಂದು ನೋಂದಾಯಿಸಲಾಗಿದೆ, ಮತ್ತು ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯ 0px ಆಗಿದೆ. box-shadow ಪ್ರಾಪರ್ಟಿಯು ಈ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ತನ್ನ ಸಮತಲ ಆಫ್‌ಸೆಟ್‌ಗಾಗಿ ಬಳಸುತ್ತದೆ. ಹೋವರ್ ಮಾಡಿದಾಗ, ಆಫ್‌ಸೆಟ್ 10px ಗೆ ಅನಿಮೇಟ್ ಆಗುತ್ತದೆ.

ಉದಾಹರಣೆ 4: ಥೀಮಿಂಗ್‌ಗಾಗಿ <custom-ident> ಬಳಸುವುದು

<custom-ident> ಸಿಂಟ್ಯಾಕ್ಸ್ ಪೂರ್ವನಿರ್ಧರಿತ ಸ್ಟ್ರಿಂಗ್ ಮೌಲ್ಯಗಳ ಗುಂಪನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಒಂದು enum ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಥೀಮಿಂಗ್ ಅಥವಾ ವಿಭಿನ್ನ ಸ್ಥಿತಿಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

ಇಲ್ಲಿ, --theme ಅನ್ನು <custom-ident> ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ನೋಂದಾಯಿಸಲಾಗಿದೆ. ನಾವು ಅನುಮತಿಸಲಾದ ಐಡೆಂಟಿಫೈಯರ್‌ಗಳನ್ನು @property ನಿಯಮದಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಪಟ್ಟಿ ಮಾಡದಿದ್ದರೂ, ಕೋಡ್ ಅವುಗಳನ್ನು `light` ಮತ್ತು `dark` ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ನಂತರ ಸಿಎಸ್ಎಸ್ ಪ್ರಸ್ತುತ ಥೀಮ್ ಆಧರಿಸಿ ವಿಭಿನ್ನ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಷರತ್ತುಬದ್ಧ ತರ್ಕವನ್ನು (var(--theme) == light ? ... : ...) ಬಳಸುತ್ತದೆ. ಎಲಿಮೆಂಟ್‌ಗೆ `dark-theme` ಕ್ಲಾಸ್ ಸೇರಿಸುವುದರಿಂದ ಥೀಮ್ ಡಾರ್ಕ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ. `var()` ಬಳಸುವ ಷರತ್ತುಬದ್ಧ ತರ್ಕವು ಪ್ರಮಾಣಿತ ಸಿಎಸ್ಎಸ್ ಅಲ್ಲ ಮತ್ತು ಆಗಾಗ್ಗೆ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿರುತ್ತದೆ. ಹೆಚ್ಚು ಪ್ರಮಾಣಿತ ವಿಧಾನವೆಂದರೆ ಸಿಎಸ್ಎಸ್ ಕ್ಲಾಸ್‌ಗಳು ಮತ್ತು ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಬಳಸುವುದು:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

ಈ ಪರಿಷ್ಕೃತ ಉದಾಹರಣೆಯಲ್ಲಿ, ಥೀಮ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು ನಾವು body ಎಲಿಮೆಂಟ್ ಮೇಲೆ data-theme ಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ಕಾಮೆಂಟ್ ಮಾಡಲಾಗಿದೆ) ಅನ್ನು `light` ಮತ್ತು `dark` ನಡುವೆ ಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಸಿಎಸ್ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳೊಂದಿಗೆ ಥೀಮಿಂಗ್ ಮಾಡಲು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಪ್ರಮಾಣಿತ ವಿಧಾನವಾಗಿದೆ.

@property ಬಳಸುವ ಪ್ರಯೋಜನಗಳು

@property ಬಳಸುವುದರಿಂದ ಹಲವಾರು ಪ್ರಯೋಜನಗಳಿವೆ:

• ಸುಧಾರಿತ ಕೋಡ್ ಓದುವಿಕೆ ಮತ್ತು ನಿರ್ವಹಣೆ: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗೆ ನಿರೀಕ್ಷಿತ ಮೌಲ್ಯದ ಪ್ರಕಾರವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಅರ್ಥವಾಗುವಂತೆ ಮತ್ತು ದೋಷಗಳಿಗೆ ಕಡಿಮೆ ಒಳಗಾಗುವಂತೆ ಮಾಡುತ್ತೀರಿ.
• ವರ್ಧಿತ ಅನಿಮೇಷನ್ ಸಾಮರ್ಥ್ಯಗಳು: @property ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಸುಗಮ ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಡೈನಾಮಿಕ್ ಮತ್ತು ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸಲು ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ.
• ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ: ಬ್ರೌಸರ್‌ಗಳು ನೋಂದಾಯಿತ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುವ ಎಲಿಮೆಂಟ್‌ಗಳ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಹುದು, ಇದು ಸುಧಾರಿತ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಪ್ರಕಾರದ ಸುರಕ್ಷತೆ (Type Safety): ನಿಗದಿಪಡಿಸಿದ ಮೌಲ್ಯವು ಘೋಷಿತ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ ಎಂದು ಬ್ರೌಸರ್ ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಡೀಬಗ್ ಮಾಡುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು ಕೋಡ್‌ಬೇಸ್‌ಗೆ ಕೊಡುಗೆ ನೀಡುವ ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
• ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳು: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯು ಸ್ಪಷ್ಟವಾಗಿ ಸೆಟ್ ಮಾಡದಿದ್ದರೂ ಸಹ ಯಾವಾಗಲೂ ಮಾನ್ಯವಾದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು, ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್‌ನ ದೃಢತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

2023 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, @property ಗೆ ಉತ್ತಮ, ಆದರೆ ಸಾರ್ವತ್ರಿಕವಲ್ಲದ ಬ್ರೌಸರ್ ಬೆಂಬಲವಿದೆ. ಇದನ್ನು ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ, ಮತ್ತು ಎಡ್ಜ್ ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಇದನ್ನು ಬೆಂಬಲಿಸದೇ ಇರಬಹುದು. ಉತ್ಪಾದನೆಯಲ್ಲಿ @property ಬಳಸುವ ಮೊದಲು ಯಾವಾಗಲೂ Can I use... ನಂತಹ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಮಾಹಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಿ.

ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು, ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಲು ನೀವು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು (@supports) ಬಳಸಬಹುದು:

@supports (--property: value) {
  /* Styles that use @property */
}

@supports not (--property: value) {
  /* Fallback styles for browsers that don't support @property */
}

--property ಮತ್ತು value ಅನ್ನು ನಿಜವಾದ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಮತ್ತು ಅದರ ಮೌಲ್ಯದೊಂದಿಗೆ ಬದಲಾಯಿಸಿ.

@property ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು

ಕೆಳಗಿನ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ @property ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ:

• ನೀವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಬೇಕಾದಾಗ: ಇದು @property ಯ ಪ್ರಾಥಮಿಕ ಬಳಕೆಯಾಗಿದೆ. ಸರಿಯಾದ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ಪ್ರಾಪರ್ಟಿಯನ್ನು ನೋಂದಾಯಿಸುವುದರಿಂದ ಸುಗಮ ಅನಿಮೇಷನ್‌ಗಳು ಸಾಧ್ಯವಾಗುತ್ತವೆ.
• ನೀವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಪ್ರಕಾರದ ಸುರಕ್ಷತೆಯನ್ನು ಜಾರಿಗೊಳಿಸಲು ಬಯಸಿದಾಗ: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯು ಯಾವಾಗಲೂ ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ಬಯಸಿದರೆ, ಅದನ್ನು ನೋಂದಾಯಿಸಲು @property ಬಳಸಿ.
• ನೀವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗೆ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸಲು ಬಯಸಿದಾಗ: initial-value ಡಿಸ್ಕ್ರಿಪ್ಟರ್ ನಿಮಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ: @property ಕೋಡ್ ನಿರ್ವಹಣೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ, ಇದು ಅನೇಕ ಡೆವಲಪರ್‌ಗಳಿರುವ ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.
• ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅಥವಾ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ಗಳನ್ನು ರಚಿಸುವಾಗ: @property ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾದ್ಯಂತ ಸ್ಥಿರತೆ ಮತ್ತು ನಿರೀಕ್ಷೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ತಪ್ಪಿಸಬೇಕಾದ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು

• syntax ಡಿಸ್ಕ್ರಿಪ್ಟರ್ ಅನ್ನು ಮರೆಯುವುದು: syntax ಡಿಸ್ಕ್ರಿಪ್ಟರ್ ಇಲ್ಲದೆ, ಬ್ರೌಸರ್‌ಗೆ ನಿರೀಕ್ಷಿತ ಮೌಲ್ಯದ ಪ್ರಕಾರ ತಿಳಿದಿರುವುದಿಲ್ಲ, ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
• ತಪ್ಪಾದ syntax ಮೌಲ್ಯವನ್ನು ಬಳಸುವುದು: ತಪ್ಪು ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದರಿಂದ ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು. ನಿರೀಕ್ಷಿತ ಮೌಲ್ಯದ ಪ್ರಕಾರವನ್ನು ನಿಖರವಾಗಿ ಪ್ರತಿಬಿಂಬಿಸುವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• initial-value ಒದಗಿಸದಿರುವುದು: ಆರಂಭಿಕ ಮೌಲ್ಯವಿಲ್ಲದೆ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯು ಅನಿರ್ದಿಷ್ಟವಾಗಿರಬಹುದು, ಇದು ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಯಾವಾಗಲೂ ಒಂದು ಸಮಂಜಸವಾದ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸಿ.
• ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿ * ಅನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದು: ಅನುಕೂಲಕರವಾಗಿದ್ದರೂ, * ಅನ್ನು ಬಳಸುವುದರಿಂದ ಪ್ರಕಾರದ ಪರಿಶೀಲನೆ ಮತ್ತು ಅನಿಮೇಷನ್‌ನ ಪ್ರಯೋಜನಗಳನ್ನು ನಿರಾಕರಿಸುತ್ತದೆ. ನೀವು ನಿಜವಾಗಿಯೂ ಯಾವುದೇ ಪ್ರಕಾರದ ಮೌಲ್ಯವನ್ನು ಅನುಮತಿಸಬೇಕಾದಾಗ ಮಾತ್ರ ಅದನ್ನು ಬಳಸಿ.
• ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು: ಯಾವಾಗಲೂ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಿ.

@property ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಹೌಡಿನಿ

@property ಸಿಎಸ್ಎಸ್ ಹೌಡಿನಿ ಎಂಬ ದೊಡ್ಡ ಎಪಿಐಗಳ ಗುಂಪಿನ ಭಾಗವಾಗಿದೆ. ಹೌಡಿನಿ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಬ್ರೌಸರ್‌ನ ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್ ಅನ್ನು ಪ್ರವೇಶಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅವರಿಗೆ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಲೇಔಟ್ ಪ್ರಕ್ರಿಯೆಯ ಮೇಲೆ ಅಭೂತಪೂರ್ವ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ. ಇತರ ಹೌಡಿನಿ ಎಪಿಐಗಳು ಸೇರಿವೆ:

• ಪೇಂಟ್ ಎಪಿಐ (Paint API): ಕಸ್ಟಮ್ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು ಮತ್ತು ಬಾರ್ಡರ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• ಅನಿಮೇಷನ್ ವರ್ಕ್‌ಲೆಟ್ ಎಪಿಐ (Animation Worklet API): ಬ್ರೌಸರ್‌ನ ಕಂಪೋಸಿಟರ್ ಥ್ರೆಡ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ರನ್ ಆಗುವ ಉನ್ನತ-ಕಾರ್ಯಕ್ಷಮತೆಯ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ಲೇಔಟ್ ಎಪಿಐ (Layout API): ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• ಪಾರ್ಸರ್ ಎಪಿಐ (Parser API): ಬ್ರೌಸರ್‌ನ ಸಿಎಸ್ಎಸ್ ಪಾರ್ಸರ್‌ಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ.

@property ಕಲಿಯಲು ತುಲನಾತ್ಮಕವಾಗಿ ಸರಳವಾದ ಹೌಡಿನಿ ಎಪಿಐ ಆಗಿದೆ, ಆದರೆ ಇದು ಹೆಚ್ಚು ಸುಧಾರಿತ ಹೌಡಿನಿ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಬಾಗಿಲು ತೆರೆಯುತ್ತದೆ.

ತೀರ್ಮಾನ

@property ಒಂದು ಶಕ್ತಿಯುತ ಸಿಎಸ್ಎಸ್ ಅಟ್-ರೂಲ್ ಆಗಿದ್ದು, ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಸುಧಾರಿತ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ. ಬ್ರೌಸರ್‌ನೊಂದಿಗೆ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೋಂದಾಯಿಸುವ ಮೂಲಕ, ನೀವು ಪ್ರಕಾರದ ಸುರಕ್ಷತೆಯನ್ನು ಜಾರಿಗೊಳಿಸಬಹುದು, ಸುಗಮ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು, ಮತ್ತು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಕೋಡ್‌ನ ಒಟ್ಟಾರೆ ದೃಢತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸಾರ್ವತ್ರಿಕವಾಗಿಲ್ಲದಿದ್ದರೂ, @property ಅನ್ನು ಬಳಸುವ ಪ್ರಯೋಜನಗಳು, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಮತ್ತು ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ಗಳಲ್ಲಿ, ಇದನ್ನು ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಒಂದು ಮೌಲ್ಯಯುತ ಸಾಧನವನ್ನಾಗಿ ಮಾಡುತ್ತದೆ. @property ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಕೌಶಲ್ಯಗಳನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಕೊಂಡೊಯ್ಯಿರಿ!